<template>
	<view class="My">
		<view class="lunbo">
			<swiper indicator-dots="true" indicator-active-color="#ffffff" interval="2000" circular="true" current="0"
				autoplay="true" bindchange="huangkuaishuliang" class="linb">
				<swiper-item v-for="(v,i,index) in arr" :key="v.id">
					<image :src="v.scr"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="beijng">
			<view class="denglu">
				<!-- 头像信息 -->
				<view class="to" @click="panduan">
					<image :src="ifindex==1?useri.avatarUrl:image" mode=""></image>
					<text class="name">{{ifindex==1?useri.nickName:dengl}}</text>
					<text class="Telephone">{{ifindex==1?Telephone:''}}</text>

				</view>
				<!-- 功能 -->
				<view class="sheng">
					<!-- 我的订单 -->
					<view class="wodedingdan" @click="wydedingdan">
						<view class="wodedingdanleft">
							<text class="ri-folder-shield-line tubiao"></text>
							<text class="ziti">我的订单</text>
						</view>
						<text class="ri-arrow-right-s-line xianyi"></text>
					</view>
					<!-- 收货地址 -->
					<view class="wodedingdan"  @click="shouhuodizhi">
						<view class="wodedingdanleft">
							<text class="ri-gps-fill tubiao"></text>
							<text class="ziti">收货地址</text>
						</view>
						<text class="ri-arrow-right-s-line xianyi"></text>
					</view>
					<!-- 我的资料 -->
					<view class="wodedingdan" @click="myzilizo">
						<view class="wodedingdanleft">
							<text class="ri-profile-fill tubiao"></text>
							<text class="ziti">我的资料</text>
						</view>
						<text class="ri-arrow-right-s-line xianyi"></text>
					</view>
					<!-- 使用须知 -->
					<view class="wodedingdan" @click="shiyong">
						<view class="wodedingdanleft">
							<text class="ri-heart-line tubiao"></text>
							<text class="ziti">使用须知</text>
						</view>
						<text class="ri-arrow-right-s-line xianyi"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="die">
			<text class="dian1"></text>
			<text class="dian2"></text>
			<text class="dian3"></text>
			<text class="xiao">小</text>
			<text class="bu">不</text>
			<text class="dian5">点</text>
			<text class="dian3"></text>
			<text class="dian2"></text>
			<text class="dian1"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image:'../../static/image/dfan.jpg',
				useri:{},
				name: 'baby',
				dengl:'登录/注册',
				ifindex:0,
				Telephone: '13094598205',
				arr: [{
						id: 1,
						scr: "https://qincore.cn/xbk/season/18-16-12.png"
					},
					{
						id: 2,
						scr: "https://qincore.cn/xbk/season/18-15-43.png"
					},
					{
						id: 3,
						scr: "https://qincore.cn/xbk/season/18-16-28.png"
					},
					{
						id: 4,
						scr: "https://qincore.cn/xbk/season/18-17-16.png"
					}
				]
			}
		},
		methods:{
			// 取用户信息
			user(){
				this.useri=uni.getStorageSync("userinfo");
				if(this.useri!=""){
					this.ifindex=1;
				}
				console.log(9999,this.useri)
				console.log(9999,this.useri.avatarUrl)
				console.log(9999,this.useri.nickName)
			},
			// 我的订单跳转
			wydedingdan(){
				uni.switchTab({
				    url: '/pages/Take/take'
				})
			},
			// 收获地址跳转
			shouhuodizhi(){
				uni.navigateTo({
				    url: '/pages/My/address'
				});
			},
			// 我的资料跳转
			myzilizo(){
				uni.navigateTo({
				    url: '/pages/My/data'
				});
			},
			// 使用须知跳转
			shiyong(){
				uni.navigateTo({
				    url: '/pages/My/notice'
				});
			},
			// <!-- 判断是否登录 -->
			panduan(){
				console.log(111)
					uni.navigateTo({
					    url:'/pages/My/login'
					});
			}
			
		},
		onShow(){
			this.user();
		}
	}
</script>

<style lang="less">
	.My {
		width: 750rpx;
		background-color: #f3f3f3;
		position: replace;
		position: relative;

		.zhanwei {
			width: 688rpx;
			height: 280rpx;
		}

		.lunbo {
			width: 750rpx;
			height: 500rpx;

			.linb {
				width: 750rpx;
				height: 500rpx;

				swiper-item {
					width: 750rpx;
					height: 500rpx;

					image {
						width: 750rpx;
						height: 500rpx;
					}

				}
			}
		}
		.beijng{
			width: 750rpx;
			height:900rpx ;
			background-color: #f0f1f3;
			position: relative;
			.denglu {
				width: 690rpx;
				height: 932rpx;
				margin: 0 auto;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				position: absolute;
				left: 30rpx;
				top: -40rpx;
				.to {
					width: 328rpx;
					width: 200rpx;
					margin: 35rpx auto;
					image {
						display: block;
						width: 140rpx;
						height: 140rpx;
						border-radius: 70rpx;
						border: 1rpx solid #59a393;
						margin: 0 auto;
						}
						text{
							display: block;
							height: 40rpx;
							margin: 0 auto;
						}
						.name{
							display: inline-block;
							width: 140rpx;
							font-size: 30rpx;
							color: #000;
							font-weight: bold;
							text-align: center;
							margin-top: 30rpx;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.Telephone{
							font-size: 23rpx;
							color: #cdcdcd;
							text-align: center;
							margin: 20rpx auto;
						}
				}
				.sheng{
					width: 600rpx;
					margin: 0 auto;
					.wodedingdan{
						width: 600rpx;
						height: 136rpx;
						border-bottom: 1rpx solid #f0f1f3;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.wodedingdanleft{
							width: 178rpx;
							height: 136rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							text{
								display: block;
								font-size: 25rpx;
							}
							.tubiao{
								color: #59a393;
								font-size: 40rpx;
							}
							.ziti{
								color: #ababab;
								font-weight: bold;
								letter-spacing: 2rpx;
							}
						}
						.xianyi{
			
							font-size: 40rpx;
							color: #ababab;
						}
					}
					
				}
			}
		}
		.die{
			width: 750rpx;
			height: 100rpx;
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.dian1{
				display: block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #017f61;
				margin: 0 5rpx;
			}
			
			.dian2{
				display: block;
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #017f61;
				margin: 0 5rpx;
			}.dian3{
				display: block;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				background-color: #017f61;
				margin: 0 5rpx;
			}
			.xiao{
				color: #017f61;
				font-size: 70rpx;
				font-weight: bold;
				margin: 0 5rpx;
				// margin-left: 20rpx;
			}
			.bu,.dian5{
				color: #017f61;
				font-size: 50rpx;
				font-weight: bold;
				margin: 0 5rpx;
			}
		}
	}
</style>
